<script setup>
import { onMounted, ref } from 'vue'
import AppFooter from '@/components/AppFooter.vue'
import AppLogos from '@/components/AppLogos.vue'
import InputEntry from '@/components/InputEntry.vue'

// 添加导航锁，防止重复导航
const isNavigating = ref(false)

onMounted(() => {
  console.log('登录选择页加载')
})

function goToLogin() {
  if (isNavigating.value) return
  
  console.log('点击登录按钮')
  isNavigating.value = true
  uni.navigateTo({
    url: '/pages/login/index',
    success: function() {
      console.log('导航到登录页成功')
    },
    fail: function(err) {
      console.error('导航到登录页失败', err)
    },
    complete: function() {
      isNavigating.value = false
    }
  })
}

function goToRegister() {
  if (isNavigating.value) return
  
  console.log('点击注册按钮')
  isNavigating.value = true
  uni.navigateTo({
    url: '/pages/login/register',
    success: function() {
      console.log('导航到注册页成功')
    },
    fail: function(err) {
      console.error('导航到注册页失败', err)
    },
    complete: function() {
      isNavigating.value = false
    }
  })
}
</script>

<template>
  <view class="root-container">
    <AppLogos />
    <view class="welcome-text">
      <text class="title">欢迎使用</text>
      <text class="subtitle">中医健康管家</text>
    </view>
    <view class="action-buttons">
      <button class="login-btn" @click="goToLogin" @tap="goToLogin">登录</button>
      <button class="register-btn" @click="goToRegister" @tap="goToRegister">注册</button>
    </view>
    <!-- <AppFooter /> -->
  </view>
</template>

<style scoped lang="scss">
.root-container
{
    display: flex;
    align-items: center;
    flex-direction: column;

    min-height: 100vh;
    padding: 5rem 2.5rem;

    text-align: center;

    background-color: #f5f5f5;
}

.welcome-text
{
    margin: 3rem 0;

    .title
    {
        font-size: 36rpx;
        font-weight: bold;

        display: block;

        margin-bottom: 1rem;

        color: #333;
    }

    .subtitle
    {
        font-size: 28rpx;

        color: #666;
    }
}

.action-buttons
{
    width: 100%;
    margin-top: 2rem;

    .login-btn,
    .register-btn
    {
        font-size: 30rpx;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 80%;
        height: 90rpx;
        margin-bottom: 1rem;

        border-radius: 45rpx;
    }

    .login-btn
    {
        color: #fff;
        background-color: #1890ff;
    }

    .register-btn
    {
        color: #1890ff;
        border: 1px solid #1890ff;
        background-color: #fff;
    }
}

</style>
